<template>
  <div class="ratings" ref="ratingsBox">
    <div class="ratings-container">
      <div class="overview">
        <div class="overview-left">
          <div class="score">{{seller.score}}</div>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <v-star :size="36" :score="seller.serviceScore"></v-star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <v-star :size="36" :score="seller.foodScore"></v-star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-time">
            <span class="title">送达时间</span>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <v-split></v-split>
      <div class="ratings-body">
        <v-ratingselect :ratings="ratings" :select-type="selectType" :only-content="onlyContent" :desc="desc" @on-select-type="_selectType" @on-only-content="_onlyContent"></v-ratingselect>
        <div class="ratings-wrapper">
          <div class="ratings-list">
            <ul v-show="ratings.length">
              <li class="rating-item border-1px" v-show="_itemIsShow(rating.rateType, rating.text)" v-for="(rating, index) in ratings" :key="index">
                <div class="avatar">
                  <img :src="rating.avatar" width="28" height="28" alt="" />
                </div>
                <div class="info-right">
                  <div class="user">
                    <span class="name">{{rating.username}}</span>
                    <span class="time">{{rating.rateTime | ratingFormatDate}}</span>
                  </div>
                  <div class="star-wrapper">
                    <v-star :size="36" :score="rating.score"></v-star>
                    <span class="delivery-time" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                  </div>
                  <div class="msg">{{rating.text}}</div>
                  <div class="recommend" v-show="rating.recommend">
                    <i :class="{'icon-thumb_up': rating.rateType===0, 'icon-thumb_down': rating.rateType===1}"></i>
                    <span class="item" v-for="(item, index) in rating.recommend" :key="index">{{item}}</span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="empty" v-show="!ratings.length">暂无评价</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Star from '@/components/star';
import Split from '@/components/split';
import RatingSelect from '@/components/ratingselect';
import BScroll from 'better-scroll';
import { axAjax, formatDate } from '@/common/js/utils.js';

const ERR_OK = 0;
const ALL = 2;

export default {
  components: {
    'v-star': Star,
    'v-split': Split,
    'v-ratingselect': RatingSelect
  },
  props: {
    seller: {
      type: Object
    }
  },
  data () {
    return {
      ratings: [],
      selectType: ALL,
			onlyContent: false,
			desc: {
				all: '全部',
				positive: '推荐',
				negative: '吐槽'
			}
    };
  },
  created () {
    axAjax('/ratings', 'get')
    .then(res => {
      if (res.errno === ERR_OK) {
        this.ratings = res.data;
        this.$nextTick(() => {
          this._initScroll();
        });
      }
    });
  },
  methods: {
    _initScroll () {
      this.scroll = new BScroll(this.$refs.ratingsBox, {
        click: true
      });
    },
    _selectType (type) {
			this.selectType = type;
			this.$nextTick(() => {
				this.scroll.refresh();
			});
		},
		_onlyContent (bool) {
			this.onlyContent = bool;
			this.$nextTick(() => {
				this.scroll.refresh();
			});
    },
    _itemIsShow (type, text) {
			if (this.onlyContent && !text) {
				return false;
			}
			if (this.selectType === ALL) {
				return true;
			} else {
				return type === this.selectType;
			}
		}
  },
  filters: {
		ratingFormatDate (time) {
			let date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd hh:mm');
		}
	}
};
</script>
<style lang="less" scoped>
 @import './res/style.less';
</style>